<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天模块</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        .chat-box {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .message {
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            position: relative;
            display: flex;
            align-items: center;
        }
        .message.sent {
            background-color: #d1ecf1;
            align-self: flex-end;
            text-align: right;
            flex-direction: row-reverse;
        }
        .message.received {
            background-color: #fff3cd;
            align-self: flex-start;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .message.sent .avatar {
            margin-left: 10px;
            margin-right: 0;
        }
        .nickname {
            font-weight: bold;
            margin-right: 10px;
        }
        .message.sent .nickname {
            margin-left: 10px;
            margin-right: 0;
        }
        /* 历史消息记录 */
        .history-box {
            height: 150px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #e9ecef;
            display: none;
        }
    </style>
</head>
<body  background="https://i0.hdslb.com/bfs/new_dyn/5474cad03da2ae1a0f230ebbac22b617290750052.jpg@1256w_708h_!web-article-pic.avif"  
style="background-repeat: no-repeat; background-attachment: fixed; background-size: 100%;">
        <div class="card">
            <div class="card-body">
                <!-- 历史消息按钮 -->
                <button class="btn btn-secondary mb-3" id="toggle-history">查看历史消息</button>

                <!-- 历史消息记录展示区域 -->
                <div id="history-box" class="history-box">
                    <!-- 历史消息内容将通过AJAX动态加载 -->
                </div>

                <!-- 当前消息展示区域 -->
                <div id="chat-history" class="d-flex flex-column chat-box">
                    <!-- 示例消息 -->
                    <div class="message received">
                        <img src="https://via.placeholder.com/40" alt="Avatar" class="avatar">
                        <div>
                            <div class="nickname">对方用户</div>
                            你好！有什么问题可以帮你吗？
                        </div>
                    </div>
                </div>

                <!-- 消息输入 -->
                <div class="input-group mt-3">
                    <input type="text" class="form-control" id="message-input" placeholder="输入消息...">
                    <button class="btn btn-primary" id="send-btn">发送</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            const chatHistory = $('#chat-history');
            const messageInput = $('#message-input');
            const sendButton = $('#send-btn');
            const historyBox = $('#history-box');
            const toggleHistoryBtn = $('#toggle-history');

            // 发送消息
            function sendMessage() {
                const messageText = messageInput.val().trim();
                if (messageText) {
                    // 调用后端接口
                    $.ajax({
                        url: '/sendMessage',
                        type: 'POST',
                        data: JSON.stringify({ content: messageText }),
                        contentType: 'application/json',
                        success: function(response) {
                            // 添加消息到聊天记录
                            addMessage(response.content, 'sent', response.nickname, response.avatar);
                        },
                        error: function() {
                            alert('发送消息失败');
                        }
                    });
                    messageInput.val('');
                }
            }

            // 按Enter键发送消息
            messageInput.on('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();  // 阻止默认的换行行为
                    sendMessage();
                }
            });

            // 按钮点击发送消息
            sendButton.on('click', function () {
                sendMessage();
            });

            // 查看历史消息
            toggleHistoryBtn.on('click', function () {
                if (historyBox.is(':visible')) {
                    historyBox.hide();
                    toggleHistoryBtn.text('查看历史消息');
                } else {
                    historyBox.show();
                    toggleHistoryBtn.text('隐藏历史消息');
                    // 调用后端接口获取历史消息
                    $.ajax({
                        url: '/getHistoryMessages',
                        type: 'GET',
                        success: function (response) {
                            historyBox.html('');  // 清空历史消息区域
                            response.forEach(function (msg) {
                                addMessageToHistory(msg.content, msg.nickname, msg.avatar);
                            });
                        },
                        error: function () {
                            alert('获取历史消息失败');
                        }
                    });
                }
            });

            // 动态添加消息
            function addMessage(text, type, nickname, avatarUrl) {
                const messageDiv = $('<div>').addClass('message').addClass(type);
                const avatarImg = $('<img>').attr('src', avatarUrl).addClass('avatar');
                const nicknameDiv = $('<div>').addClass('nickname').text(nickname);
                const messageContent = $('<div>').text(text);

                messageDiv.append(avatarImg).append($('<div>').append(nicknameDiv).append(messageContent));
                chatHistory.append(messageDiv);
                chatHistory.scrollTop(chatHistory.prop('scrollHeight'));
            }

            // 动态添加历史消息
            function addMessageToHistory(text, nickname, avatarUrl) {
                const historyMessage = $('<div>').text(`${nickname}: ${text}`);
                historyBox.append(historyMessage);
            }
        });
    </script>
</body>
</html>
